<template>
  <div style="background-color: #f0f2f5; padding: 0px">
    <PageHeader
      :breadcrumb="breadcrumb"
      style="background-color: white; padding: 24px; margin-bottom: 16px"
    />
    <div style="background-color: white; padding: 24px; padding-top: 0px">
      <div style="text-align: end;padding: 8px">
        <a-button
            size="large"
            type="primary"
            @click="onRefresh"
        >
          刷新
        </a-button>
      </div>
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 10 }"
        :scroll="{ x: 240 }"
      >
        <template #operation="{ record }">
          <AuditOperation
            @pass="onPass(record.key)"
            @reject="onReject(record.key)"
          />
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import PageHeader from "../Common/PageHeader";
import AuditOperation from "./AuditOperation";
import { message } from "ant-design-vue";

const columns = [
  {
    title: "实验名称",
    dataIndex: "experiment_name",
    width: 150,
  },
  {
    title: "实验方案名称",
    dataIndex: "experiment_program_name",
    width: 150,
  },
  {
    title: "实验编码",
    dataIndex: "experiment_code",
    width: 150,
  },
  {
    title: "实验原理",
    dataIndex: "experimental_principle",
    width: 150,
  },
  {
    title: "实验记录",
    dataIndex: "experiment_record",
    width: 150,
  },
  {
    title: "实验现象",
    dataIndex: "experiment_phenomena",
    width: 150,
  },
  {
    title: "原料名称",
    dataIndex: "raw_material_name",
    width: 150,
  },
  {
    title: "纯度",
    dataIndex: "purity",
    width: 150,
  },
  {
    title: "原料来源",
    dataIndex: "raw_material_source",
    width: 150,
  },
  {
    title: "设备名称",
    dataIndex: "equipment_name",
    width: 150,
  },
  {
    title: "设备厂家",
    dataIndex: "equipment_manufacturer",
    width: 150,
  },
  {
    title: "设备型号",
    dataIndex: "device_model",
    width: 150,
  },
  {
    title: "数量",
    dataIndex: "quantity",
    width: 150,
  },
  {
    title: "实验步骤",
    dataIndex: "equipment_steps",
    width: 150,
  },
  {
    title: "样品编号",
    dataIndex: "sample_num",
    width: 150,
  },
  {
    title: "实验预期",
    dataIndex: "experimental_expectation",
    width: 150,
  },
  // {
  //   title: "审核人",
  //   dataIndex: "experiment_procedure_reviewer",
  //   width: 150,
  // },
  {
    title: "操作",
    dataIndex: "operation",
    slots: { customRender: "operation" },
    width: 150,
  },
];

export default {
  name: "ExperimentProcedureAudit",
  components: {
    PageHeader,
    AuditOperation,
  },
  data() {
    const refreshInterval = 100;
    return {
      breadcrumb: [
        { key: 1, title: "审核" },
        { key: 2, title: "实验过程审核" },
      ],
      data: [],
      loading: false,
      columns,
      refreshInterval,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    // 从后端获取数据
    fetch() {
      this.loading = true;
      let updatedData = [];
      this.axios
        .get("experiment_management/get_require_audit_experiment_procedures/")
        .then((res) => {
          const data = res.data;
          for (let i = 0; i < data.length; ++i) {
            updatedData.push({
              key: data[i].experiment_procedure_id,
              experiment_name: data[i].experiment_name,
              experiment_program_name: data[i].experiment_program_name,
              experiment_code: data[i].experiment_code,
              experimental_principle: data[i].experimental_principle,
              experiment_record: data[i].experiment_record,
              experiment_phenomena: data[i].experiment_phenomena,
              raw_material_name: data[i].raw_material_name,
              purity: data[i].purity,
              raw_material_source: data[i].raw_material_source,
              equipment_name: data[i].equipment_name,
              equipment_manufacturer: data[i].equipment_manufacturer,
              device_model: data[i].device_model,
              quantity: data[i].quantity,
              equipment_steps: data[i].equipment_steps,
              sample_num: data[i].sample_num,
              experimental_expectation: data[i].experimental_expectation,
              // experiment_procedure_reviewer:
              //   data[i].readable_experiment_procedure_reviewer,
            });
          }
          setTimeout(() => {
            this.data = updatedData;
            this.loading = false;
          }, this.refreshInterval);
          // this.loading = false
          // console.log('chemical:', res)
        })
        .catch((error) => {
          setTimeout(() => {
            this.loading = false;
          }, this.refreshInterval);
          console.log("Error", error.message);
        });
    },
    onPass(key) {
      // console.log("pass", key);
      this.axios
        .patch("experiment_management/experiment_procedure/" + key + "/", {
          approval_status: "2",
        })
        .then(() => {
          message.success("操作成功!");
          this.fetch();
        })
        .catch((error) => {
          message.error("操作失败!");
          console.log("Error", error.message);
        });
    },
    onReject(key) {
      // console.log("reject", key);
      this.axios
        .patch("experiment_management/experiment_procedure/" + key + "/", {
          approval_status: "0",
        })
        .then(() => {
          message.success("操作成功!");
          this.fetch();
        })
        .catch((error) => {
          message.error("操作失败!");
          console.log("Error", error.message);
        });
    },
    onRefresh(){
      this.fetch()
    },
  },
};
</script>

<style>
#operationButton {
  text-align: right;
}
</style>
